<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>better-scroll的基本使用</title>
  <style>
    .wrapper {
      height: 300px;
      background-color: seashell;

      overflow-y: hidden;
    }
  </style>
</head>

<body>
  <div class="wrapper">
    <ul class="content">
      <button class="btn">点击</button>
      <li>列表数据1</li>
      <li>列表数据2</li>
      <li>列表数据3</li>
      <li>列表数据4</li>
      <li>列表数据5</li>
      <li>列表数据6</li>
      <li>列表数据7</li>
      <li>列表数据8</li>
      <li>列表数据9</li>
      <li>列表数据10</li>
      <li>列表数据11</li>
      <li>列表数据12</li>
      <li>列表数据13</li>
      <li>列表数据14</li>
      <li>列表数据15</li>
      <li>列表数据16</li>
      <li>列表数据17</li>
      <li>列表数据18</li>
      <li>列表数据19</li>
      <li>列表数据20</li>
      <li>列表数据21</li>
      <li>列表数据22</li>
      <li>列表数据23</li>
      <li>列表数据24</li>
      <li>列表数据25</li>
      <li>列表数据26</li>
      <li>列表数据27</li>
      <li>列表数据28</li>
      <li>列表数据29</li>
      <li>列表数据30</li>
      <li>列表数据31</li>
      <li>列表数据32</li>
      <li>列表数据33</li>
      <li>列表数据34</li>
      <li>列表数据35</li>
      <li>列表数据36</li>
      <li>列表数据37</li>
      <li>列表数据38</li>
      <li>列表数据39</li>
      <li>列表数据40</li>
      <li>列表数据41</li>
      <li>列表数据42</li>
      <li>列表数据43</li>
      <li>列表数据44</li>
      <li>列表数据45</li>
      <li>列表数据46</li>
      <li>列表数据47</li>
      <li>列表数据48</li>
      <li>列表数据49</li>
      <li>列表数据50</li>
      <li>列表数据51</li>
      <li>列表数据52</li>
      <li>列表数据53</li>
      <li>列表数据54</li>
      <li>列表数据55</li>
      <li>列表数据56</li>
      <li>列表数据57</li>
      <li>列表数据58</li>
      <li>列表数据59</li>
      <li>列表数据60</li>
      <li>列表数据61</li>
      <li>列表数据62</li>
      <li>列表数据63</li>
      <li>列表数据64</li>
      <li>列表数据65</li>
      <li>列表数据66</li>
      <li>列表数据67</li>
      <li>列表数据68</li>
      <li>列表数据69</li>
      <li>列表数据70</li>
      <li>列表数据71</li>
      <li>列表数据72</li>
      <li>列表数据73</li>
      <li>列表数据74</li>
      <li>列表数据75</li>
      <li>列表数据76</li>
      <li>列表数据77</li>
      <li>列表数据78</li>
      <li>列表数据79</li>
      <li>列表数据80</li>
      <li>列表数据81</li>
      <li>列表数据82</li>
      <li>列表数据83</li>
      <li>列表数据84</li>
      <li>列表数据85</li>
      <li>列表数据86</li>
      <li>列表数据87</li>
      <li>列表数据88</li>
      <li>列表数据89</li>
      <li>列表数据90</li>
      <li>列表数据91</li>
      <li>列表数据92</li>
      <li>列表数据93</li>
      <li>列表数据94</li>
      <li>列表数据95</li>
      <li>列表数据96</li>
      <li>列表数据97</li>
      <li>列表数据98</li>
      <li>列表数据99</li>
      <li>列表数据100</li>
    </ul>
  </div>
</body>

<script src="./bscroll.js"></script>
<script>
  // proType: {
  // 0: 明确不侦测 
  // 1: 也不侦测 
  // 2: 侦测 [手指滚动的时候进行侦测, 手指离开的惯性过程不侦测]
  // 3: 侦测 [只要是滚动, 都侦测]
  // }
  const bscroll = new BScroll('.wrapper', {
    probeType: 3,
    // 允许better-scroll内部打开普通click监听
    click: true,
    // 下拉加载监听事件打开
    pullUpLoad: true
  });

  // 1. 监听事件 on("事件类型", "回调函数");
  bscroll.on("scroll", (position) => {
    // console.log("[滚动中] >>>", position);
  })

  // 2. 上拉加载的回到函数
  bscroll.on("pullingUp", () => {
    console.log("[上拉加载] 加载中 >>>");

    // 发送网络请求, 请求更多页的数据

    // 等待2秒过后, 完成本次下拉, 可以进行下次下拉加载
    setTimeout(() => {
      bscroll.finishPullUp();
    }, 2000);
  })

  // 测试按钮在better-scroll下的监听
  document.querySelector('.btn').addEventListener('click', (e) => {
    console.log("牛皮", e);
  })
</script>

</html>